React Routerでジャンプ先のコンポーネントに情報を渡す方法がわからない
React-routerでページを介して情報を渡す方法がわからない
ユーザが並んでいて、選択するとユーザの個別ページにいくようなアプリをかんがえている
そのときreact routerでルーティングを次のように書いた
code:jsx
// rootのcomponent
<Router>
<React.Fragment>
<ApolloProvider client={client}>
<Route exact path="/" component={UserTable} />
<Route path="/users/:name" component={UserView} />
</ApolloProvider>
</React.Fragment>
</Router>
// UserTable componetの中ではユーザの一覧があり、クリックするとLinkで/users/:nameにジャンプするようになっている
このとき、次を満たしたい
/ でkadoyauを選択した場合に、 /user/kadoyau にとばしたい
/ で取得したコンテキストを渡したい
<Route path="/users/:name" component={UserView} /> にpropsを渡すにはどうすればいいか？
実現方法（？）
一つ一つの列に対してRouteを設定する
Routeが様々なコンポーネントに散らかってしまうので避けたい
有識者に教えてもらった
簡単な方法
でも直リンでおしまいになる
取りうる方法
Routeをネストさせる（/以下で/users/:nameのrouteを書く）
いつこれがいい？
ルーティングが/usersと/users/:nameみたいなとき
/users/:nameで/usersのコンポーネントが一部残るとき
両方に共通するストアを用意する
手順
/でユーザを選択したときにcontextに書き込む
ルーティング定義をする前段階でcontextから情報を取得し、render props等で/users/:nameのcomponentに情報を渡す
もしルーティングの後にcontextから情報を取得した場合直リンでうまくいかないかも
やった
手順
top levelにstateとそれを変更するfunctionを定義する
useStateを利用した
/でユーザを選択した際に、選択されたユーザの情報をfunctionを使ってtop levelのstateに書き込む
/users/:nameにアクセスした際には、contextにあるstateを読み、それをもとにUserAPIをたたいてユーザ情報を表示する
しかし/users/:nameページへの直リンでうまく動かない
stateの初期値で情報を取得しにいってしまう（ユーザクリック時にstateを書き込んでいるので当たり前）
結局、:nameで情報を引けるresolverを書いた